import { HallButton } from './button';
import hallData from './JSON/Data.json';
import type { HallItemData } from './interface';
import HallData from './interface';
import HallItem, { itemSize } from './item';
import type { RemoteLinkData } from '../../../shares/sharesApp';

HallData.loadData(hallData);

export class HallScreen {
    screen: UiScreen;
    items: HallItem[] = [];
    type: string = 'all';
    scrollBox: UiScrollBox;
    button: HallButton;
    constructor() {
        const textFontSize = Math.max(screenWidth / 50, screenHeight / 50);

        this.screen = UiScreen.create();
        this.screen.visible = false;

        const background = UiBox.create();
        background.parent = this.screen;
        background.size.offset.copy(Vec2.create({ x: 0, y: 0 }));
        background.size.scale.copy(Vec2.create({ x: 1, y: 1 }));
        background.backgroundColor.copy(Vec3.create({ r: 0, g: 0, b: 0 }));

        const title = UiText.create();
        title.parent = this.screen;
        title.size.offset.copy(
            Vec2.create({
                x: screenWidth,
                y: Math.min(screenWidth / 10, screenHeight / 10),
            })
        );
        // title.size.scale.copy(Vec2.create({ x: 1, y: 0.1 }));
        title.textXAlignment = 'Center';
        title.textYAlignment = 'Center';
        title.textFontSize = textFontSize;
        title.textColor.copy(Vec3.create({ r: 255, g: 255, b: 255 }));
        title.textContent = '作品展厅';

        // 分类
        for (let i = 0; i < hallData.categories.length; i++) {
            const category = hallData.categories[i];
            const type = UiText.create();
            type.parent = this.screen;
            type.size.offset.copy(Vec2.create({ x: 0, y: 0 }));
            type.size.scale.copy(
                Vec2.create({
                    x: 1 / hallData.categories.length,
                    y:
                        Math.min(screenWidth / 10, screenHeight / 10) /
                        screenHeight,
                })
            );
            type.position.scale.copy(
                Vec2.create({
                    x: i / hallData.categories.length,
                    y:
                        Math.min(screenWidth / 10, screenHeight / 10) /
                        screenHeight,
                })
            );
            type.textXAlignment = 'Center';
            type.textYAlignment = 'Center';
            type.textFontSize = textFontSize;
            type.textColor.copy(Vec3.create({ r: 255, g: 255, b: 255 }));
            type.textContent = category.name;
            type.events.on('pointerdown', () => {
                this.type = category.id;
                this.turn(this.type);
            });
        }

        // 创建滚动容器
        this.scrollBox = Object.assign(
            UiScreen.getAllScreen()
                .find((e) => e.name === 'playerScreen')!
                .findChildByName<UiScrollBox>('备用滑动框')!
                .clone(),
            {
                visible: true,
            }
        );
        this.scrollBox.parent = background;

        const scrollSize = Vec2.create({
            x: screenWidth * 0.95,
            y: screenHeight - Math.min(screenWidth / 5, screenHeight / 5),
        });
        this.scrollBox.size.offset.copy(scrollSize);

        this.scrollBox.position.offset.copy(
            Vec2.create({
                x: screenWidth * 0.025,
                y: Math.min(screenWidth / 5, screenHeight / 5),
            })
        );

        const scrollBgColor = Vec3.create({ r: 35, g: 35, b: 45 });
        this.scrollBox.backgroundColor.copy(scrollBgColor);

        this.scrollBox.autoResize = 'Y';

        // 创建作品项
        this.items = [];
        const size = Vec2.create({
            x: this.scrollBox.size.offset.x,
            y: screenHeight - Math.min(screenWidth / 5, screenHeight / 5),
        });
        for (let j = 0; j < 10; j++) {
            for (let i = 0; i < 4; i++) {
                const item: HallItem = new HallItem();
                item.create(this.scrollBox);
                item.setPosition(
                    (size.x / 4) * (i + 0.5) - itemSize / 2,
                    itemSize * 1.75 * j + 0.2
                );
                item.onClick(() => {
                    console.log('(Client)', 'Item clicked:', i, j);
                    remoteChannel.sendServerEvent<RemoteLinkData>({
                        type: 'link',
                        data: item.data.link,
                    });
                });
                this.items.push(item);
            }
        }

        // 按钮
        this.button = new HallButton(this.screen);
        this.button.button.textContent = '返回';
    }

    turn(type: string): void {
        console.log('(Client)', 'type:', this.type);
        const data = HallData.getItems().filter(
            (item: HallItemData) => item.type === type || type === 'all'
        );
        for (let i = 0; i < this.items.length; i++) {
            const item = this.items[i];
            const index = i;
            if (index < data.length) {
                item.upDate(data[index] as HallItemData);
                item.show();
            } else {
                item.hide();
            }
        }
    }

    show(): void {
        this.screen.visible = true;
        this.type = 'all';
        this.turn('all');
    }

    hide(): void {
        this.screen.visible = false;
    }
}

export const hallScreen = new HallScreen();
